<template>
  <div class="detail-modal flex column">
    <div class="header flex column justify-around">
      <div class="name">{{ record.restaurantName }}</div>
      <div class="address">
        <span class="label">营业地址：</span>
        <span class="value">{{ record.detailAddress || '暂无' }}</span>
      </div>
    </div>
    <div class="content">
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">所属街道:</div>
          <div class="value">{{ record.regionId_dictText }}</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">监管单位:</div>
          <div class="value">{{ record.unitId_dictText }}</div>
        </div>
      </div>
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">负责人姓名:</div>
          <div class="value">{{ record.chargeName }}</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">负责人电话:</div>
          <div class="value">{{ record.chargePhone }}</div>
        </div>
      </div>
      <!-- <div class="flex" v-if="!isShowFooter">
        <div class="f1 common-wrap">
          <div class="lable">清洗周期:</div>
          <div class="value">{{ record.cleanCycle }}天</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">清洗倒计时：</div>
          <div class="value" v-if="record.expireDay > 0">{{ record.expireDay }}天</div>
          <div class="value" v-else style="color: #ff517b">逾期{{ record.expireDay * -1 }}天</div>
        </div>
      </div> -->
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">营业执照照片:</div>
          <div class="value cursor" style="color: #00fe9f" @click="werImg('minImg')">
            查看
            <img
              id="minImg"
              style="display: none"
              :src="`${imgPrefix + record.businessPhoto}`"
              :data-original="`${imgPrefix + record.businessPhoto}`"
            />
          </div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">营业信息:</div>
          <div class="value cursor" style="color: #00fe9f" @click="showBussinessInfo">查看</div>
        </div>
      </div>
    </div>
    <div
      v-if="!isShowFooter"
      class="f1"
      style="padding-left: 0.2rem; transform: translateY(-26%); border-top: 0.02rem solid #025d60"
    >
      <div class="common-wrap">
        <div class="lable">拒绝理由:</div>
      </div>
      <div class="common-wrap">
        <div class="value">{{ record.auditMemo }}</div>
      </div>
    </div>
    <div class="footer flex align-center justify-center" v-if="isShowFooter">
      <a-button class="ant-btn" @click="cancel">拒绝</a-button>
      <a-button class="ant-btn" @click="handleOk">通过</a-button>
    </div>
    <cancel-model ref="cancelModel" @success="refresh"></cancel-model>
    <bussiness-info ref="bussinessInfo" :record.sync="record"></bussiness-info>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { comMethods } from '@/mixins/comMethods'
import cancelModel from '../modules/cancelModel'
import { auditRestaurant } from '@/api/restaurant'
import bussinessInfo from '../modules/businessInfo'
export default {
  name: '',
  props: {
    isShowFooter: {
      type: Boolean,
      default: true,
    },
    record: {
      type: Object,
    },
  },
  mixins: [comMethods],
  components: { cancelModel, bussinessInfo },
  data() {
    return {
      imgPrefix: '',
    }
  },
  mounted() {},
  methods: {
    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show() // 点击图片放大注销此方法
    },
    cancel() {
      this.$refs.cancelModel.show({ id: this.record.id })
    },
    refresh() {
      this.$emit('cancel')
    },
    showBussinessInfo() {
      this.$refs.bussinessInfo.show()
    },
    async handleOk() {
      let params = {
        id: this.record.id,
        auditStatus: 2,
      }
      try {
        let res = await auditRestaurant(params)
        this.$message.success(res.message)
      } catch {
        this.$message.error(res.message)
      }
      this.$emit('handleOk')
    },
  },
  destroyed() {},
}
</script>

<style scoped lang="less">
.detail-modal {
  width: 5.4rem;
  height: 6rem;
  background: #024c4e;
  display: flex;
  flex-direction: column;
  border: 0.01rem solid #025d60;
  font-family: PingFang SC-Bold, PingFang SC;
  .header,
  .footer {
    height: 0.9rem;
    border: 0.01rem solid #025d60;
  }

  .header {
    padding-left: 0.2rem;
    .name {
      font-size: 0.16rem;
      font-weight: bold;
      color: #06d6db;
    }
    .label {
      font-size: 0.14rem;
      font-weight: 400;
      color: #02c1c7;
    }
    .value {
      font-size: 0.14rem;
      font-weight: 400;
      color: #9cfdff;
    }
  }

  .content {
    flex: 1;
    padding-left: 0.2rem;
  }

  .footer {
    .ant-btn {
      border: none;
      padding: 0 0.4rem;
    }
    .ant-btn:nth-child(1) {
      margin-right: 0.5rem;
      background: #fff351;
      border: 0.01rem solid #fff351;
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 0.2rem;
      color: #024c4e;
    }
    .ant-btn:nth-child(2) {
      background: #00f8ff;
      border: 0.01rem solid #00f8ff;
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 0.2rem;
      color: #024c4e;
    }
  }

  .common-wrap {
    font-size: 0.14rem;
    font-weight: 400;
    margin-top: 0.16rem;
    display: flex;
    .lable {
      color: #02c1c7;
    }
    .value {
      color: #9cfdff;
      margin-left: 0.05rem;
    }
  }
}
</style>
